<!--
 * @Description: 评价管理
 * @Author: py
 * @Date: 2024-07-29
-->
<script setup lang="ts" name="evaluate-manage">
import type { VxePagerEvents } from 'vxe-table'

import { evaluateListApi, isOpenApi } from '@fl/api/city-service'
import { useRouter } from 'vue-router'

import type { IRowV0 } from './types'

import { useForm } from './hooks/use-form'
import { useTable } from './hooks/use-table'

const { form, schema, state } = useForm()
const { gridOptions } = useTable()
const router = useRouter()

const tablePage = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})

function getList() {
    gridOptions.loading = true

    const {
        evaluateDate,
        keyword,
        levels,
    } = form.value
    let commentStar, createTimeEnd, createTimeStart
    if (levels.length) {
        commentStar = levels.join(',')
    }
    if (Array.isArray(evaluateDate)) {
        createTimeEnd = `${evaluateDate[1]} 23:59:59`
        createTimeStart = `${evaluateDate[0]} 00:00:00`
    }
    const oParams = {
        commentStar,
        createTimeEnd,
        createTimeStart,
        like: keyword,
        page: tablePage.currentPage,
        size: tablePage.pageSize,
    }

    evaluateListApi(oParams).then((res) => {
        const { records, total } = res
        const formatList = records.map((rItem: IRowV0) => {
            return {
                ...rItem,
                isShowPhone: false,
            }
        })
        tablePage.total = total
        gridOptions.data = formatList
    }).finally(() => {
        gridOptions.loading = false
    })
}
getList()

function search() {
    tablePage.currentPage = 1
    getList()
}
function reset() {
    form.value = {
        ...state,
    }
    tablePage.currentPage = 1
    tablePage.pageSize = 10
    getList()
}
const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.currentPage = currentPage
    tablePage.pageSize = pageSize
    getList()
}

// 手机号做脱敏处理
function phoneHide(phone: any) {
    if (phone) {
        return String(phone).replace(/(\d{3})\d*(\d{4})/, '$1****$2')
    }
    return phone
}

// 隐藏/显示评价
function changeStatus(row) {
    const oParams = {
        appraiseId: row.appraiseId, // 评论id
        isShow: row.isShow, // 是否展示：0不展示，1展示
    }

    isOpenApi(oParams).then(() => {
        const toastTips = row.isShow ? '显示' : '隐藏'
        ElMessage.success(`该评价已${toastTips}`)
    })
}

function toGoodsDetail(row: any) {
    router.push({
        name: 'commodity-detail',
        params: {
            id: row.spuId,
            pageType: 'detail',
        },
    })
}

function toOrderDetail(row) {
    router.push({
        path: '/city/life-mall-order/order-details',
        query: {
            orderId: row.orderId,
        },
    })
}
</script>

<template>
    <ElCard class="mb-20">
        <PlusForm v-model="form"
                  :columns="schema"
                  :row-props="{ gutter: 20 }"
                  label-width="80"
                  label-position="right"
        >
            <template #footer>
                <div class="ml-auto">
                    <ElButton type="primary"
                              @click="search"
                    >
                        查询
                    </ElButton>

                    <ElButton @click="reset">
                        重置
                    </ElButton>
                </div>
            </template>
        </PlusForm>
    </ElCard>

    <ElCard>
        <vxe-grid v-bind="gridOptions">
            <template #textImgEva="{ row }">
                <div class="flex items-center">
                    <el-image v-if="row.appraiseImgPath && row.appraiseImgPath.length"
                              class="mr-5 w-50"
                              :src="row.appraiseImgPath[0]"
                              :preview-src-list="row.appraiseImgPath"
                              fit="contain"
                    />

                    <span class="line-clamp-2 text-left flex-1">{{ row.appraiseContent }}</span>
                </div>
            </template>

            <template #goodsInfo="{ row }">
                <div class="flex items-center">
                    <el-image v-if="row?.skuImgPath"
                              class="mr-5 w-50"
                              :src="row?.skuImgPath"
                              :preview-src-list="[row?.skuImgPath]"
                              fit="contain"
                    />

                    <el-link type="primary"
                             :underline="false"
                             class="flex-1"
                             @click="toGoodsDetail(row)"
                    >
                        <span class="line-clamp-2 text-left">{{ row.skuName }}</span>
                    </el-link>
                </div>
            </template>

            <template #userInfo="{ row }">
                <div>
                    {{ row.receiverName }}
                </div>

                <el-button type="primary"
                           link
                           @click="row.isShowPhone = !row.isShowPhone"
                >
                    {{ row.isShowPhone ? row.receiverTel : phoneHide(row.receiverTel) }}
                </el-button>
            </template>

            <template #evaLevel="{ row }">
                <el-rate v-model="row.appraiseStarLevel"
                         disabled
                />
            </template>

            <template #status="{ row }">
                {{ row.isShow === 1 ? '展示中' : '未展示' }}
            </template>

            <template #operate="{ row }">
                <el-switch v-model="row.isShow"
                           :active-value="1"
                           :inactive-value="0"
                           class="mr-3"
                           @change="changeStatus(row)"
                />

                <el-link type="primary"
                         :underline="false"
                         @click="toOrderDetail(row)"
                >
                    查看订单
                </el-link>
            </template>

            <template #pager>
                <vxe-pager :current-page="tablePage.currentPage"
                           :page-size="tablePage.pageSize"
                           :total="tablePage.total"
                           :layouts="['Home', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'End', 'Sizes', 'FullJump', 'Total']"
                           background
                           @page-change="handlePageChange"
                />
            </template>
        </vxe-grid>
    </ElCard>
</template>

<style lang="less" scoped>
.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
</style>
